Привет, данная статья является продолжением вот этого поста, где я решил начать серию небольших учебных пособий по созданию UI-Kit. Там описан метод использования контекста для создания темы приложения. Сегодня я хочу дополнить приложение еще одним контекстом, который поможет нам показывать компоненты UI, основываясь на дивайсе юзера.

В данном примере я также буду использовать модуль create-react-context.

Дерево задания будет идентичным с предыдущим. Назовем новую папку media-context.

media-context/    MediaConsumer/       MediaConsumer.js       index.js     MediaProvider/       MediaProvider.js       index.js   constants.js    context.js   index.js 

Быстренько разберемся с index’ами.

media-context/index.js

export { MediaProvider } from './MediaProvider'; export { MediaConsumer } from './MediaConsumer'; 

theme-context/MediaConsumer/index.js

export { MediaConsumer } from './MediaConsumer'; 

theme-context/MediaProvider/index.js

export { MediaProvider } from